<template>
	<view :style="warpCss">
		<view class="diy-text relative">
			<view class="px-[30rpx] py-[15rpx] flex items-center justify-between title-bg">
				<view @click="diyStore.toRedirect(diyComponent.link)">
					<view class="max-w-[200rpx] truncate leading-[1]" :style="{ fontSize: diyComponent.fontSize * 1.8 + 'rpx', color: diyComponent.textColor, fontWeight: diyComponent.fontWeight }">
						{{ diyComponent.text }}
					</view>
				</view>
				{{ diyComponent.more.fontSize }}
				<view class="flex items-center qbdd-class">
					<view  @click="redirect({ url: '/addon/shop/pages/order/list'})" class="flex items-center">
						<text class="max-w-[200rpx] truncate text-[24rpx]" :style="{ color: diyComponent.more.color }">{{ diyComponent.more.text }}</text>
						<text class="nc-iconfont nc-icon-youV6xx text-[26rpx]" :style="{ color: diyComponent.more.color }"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="pb-[40rpx] pt-[40rpx] px-[20rpx] flex items-center justify-between text-center scdd-bg">
			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(1)">
				<view class="relative w-[55rpx] h-[55rpx]">
<!--					<image class="w-[55rpx] h-[55rpx]" :src="img('addon/shop/diy/member/order1.png')" />-->
					<image class="w-[55rpx] h-[55rpx]" src="@/image/shopOrder/dfk.png"/>
					<view v-if="orderInfo.wait_pay"
						:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.wait_pay > 9 ? 'px-[10rpx]' : '']">
						{{ orderInfo.wait_pay > 99 ? "99+" : orderInfo.wait_pay }}
					</view>
				</view>
				<view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">待付款</view>
			</view>
			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(2)">
				<view class="relative w-[55rpx] h-[55rpx]">
<!--					<image class="w-[55rpx] h-[55rpx]" :src="img('addon/shop/diy/member/order2.png')" />-->
          <image class="w-[55rpx] h-[55rpx]" src="@/image/shopOrder/dsy.png"/>
					<view v-if="orderInfo.wait_shipping"
						:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.wait_shipping > 9 ? 'px-[10rpx]' : '']">
						{{ orderInfo.wait_shipping > 99 ? "99+" : orderInfo.wait_shipping }}
					</view>
				</view>
				<view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">待发货</view>
			</view>
			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(3)">
				<view class="relative w-[55rpx] h-[55rpx]">
<!--					<image class="w-[55rpx] h-[55rpx]" :src="img('addon/shop/diy/member/order3.png')" />-->
          <image class="w-[55rpx] h-[55rpx]" src="@/image/shopOrder/dpj.png"/>
					<view v-if="orderInfo.wait_take"
						:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.wait_take > 9 ? 'px-[10rpx]' : '']">
						{{ orderInfo.wait_take > 99 ? "99+" : orderInfo.wait_take }}
					</view>
				</view>
				<view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">待收货</view>
			</view>
			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toList(5)">
				<view class="relative w-[55rpx] h-[55rpx]">
<!--					<image class="w-[55rpx] h-[55rpx]" :src="img('addon/shop/diy/member/order4.png')" />-->
          <image class="w-[55rpx] h-[55rpx]" src="@/image/shopOrder/dpjbf.png"/>
					<view v-if="orderInfo.evaluate"
						:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.evaluate > 9 ? 'px-[10rpx]' : '']">
						{{ orderInfo.evaluate > 99 ? "99+" : orderInfo.evaluate }}
					</view>
				</view>
				<view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">待评价</view>
			</view>
			<view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="redirect({ url: '/addon/shop/pages/refund/list'})">
				<view class="relative w-[55rpx] h-[55rpx]">
<!--					<image class="w-[55rpx] h-[55rpx]" :src="img('addon/shop/diy/member/order5.png')" />-->
          <image class="w-[55rpx] h-[55rpx]" src="@/image/shopOrder/wddd.png"/>
					<view v-if="orderInfo.refund"
						:class="['absolute left-[35rpx] top-[-10rpx] rounded-[28rpx] h-[28rpx] min-w-[28rpx] text-center leading-[30rpx] bg-[#FF4646] text-[#fff] text-[20rpx] font-500 box-border', orderInfo.refund > 9 ? 'px-[10rpx]' : '']">
						{{ orderInfo.refund > 99 ? "99+" : orderInfo.refund }}
					</view>
				</view>
				<view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">售后/退款</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, watch,onMounted } from 'vue';
	import useDiyStore from '@/app/stores/diy';
	import { img,redirect } from '@/utils/common';
	import {getShopOrderNum} from '@/addon/shop/api/order';

	const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
	const diyStore = useDiyStore();
	const diyComponent = computed(() => {
		if (diyStore.mode == 'decorate') {
			return diyStore.value[props.index];
		} else {
			return props.component;
		}
	})

	onMounted(() => {
		refresh();
	});

	watch(
	    () => diyComponent.value,
		(newValue, oldValue) => {
            refresh();
        },{deep: true})

	const refresh = () => {
		// 装修模式
		if (diyStore.mode == 'decorate') {
			orderInfo.value = {
	        }
		} else {
			getShopOrderNumFn()
		}
	}

	const orderInfo = ref({})
	const warpCss = computed(() => {
		var style = '';
	    style += 'position:relative;';
	    if(diyComponent.value.componentStartBgColor) {
	        if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
	        else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
	    }

	    if(diyComponent.value.componentBgUrl) {
	        style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
	        style += 'background-size: cover;background-repeat: no-repeat;';
	    }

		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
		return style;
	})

	const getShopOrderNumFn=()=>{
		getShopOrderNum().then((res:any)=>{
			orderInfo.value = res.data
		})
	}
	const toList = (status:any) => {
		redirect({ url: '/addon/shop/pages/order/list', param: { status } })
	}
</script>

<style lang="scss" scoped>
.scdd-bg {
  background-image: url("../../../../../image/shopOrder/scdd-bg.png");
  background-size: 100% 100%;
}
.title-bg {
  padding-left: 76rpx;
  padding-top: 20rpx;
  background-image: url("../../../../../image/shopOrder/title-bg.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  font-size: 24rpx !important;
  transform: translateY(18rpx);
}
.qbdd-class {
  transform: translateY(-12rpx);
}
</style>
